<template>
	<body-wrap :isFlex='true' @loadMore="getList" :status='status' :showLoading="lists && lists.length>0">
		<template v-slot:header>
			<c-tab @onclick="tabChange" :lists='tabList'/>	
		</template>
		<view class="tabcon">
			<service-list ref="subRef1" :lists="lists"/>
			<empty v-if="lists && lists.length==0"/>
		</view>
		<template v-slot:footer>
			<shopping-buy-list v-if="goods.length>0" @onclick="goNext"/>
		</template>
	</body-wrap>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import bodyWrap from "@/components/bodyWrap/index.vue"
	import cTab from "@/components/cTab/cTab.vue"
	import serviceList from "./components/serviceList.vue"
	import shoppingBuyList from "@/components/shoppingBuyList/shoppingBuyList.vue"
	import {getServiceList,getCategoryList} from "@/api/index.js"
	import {empty} from "@/components/empty/empty.vue"
	export default defineComponent({
		components:{
			bodyWrap,
			cTab,
			serviceList,
			shoppingBuyList,
			empty
		},
		props:{
			
		},
		
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				orderInfo:computed(()=>store.state.base.orderInfo), 
				goods:computed(()=>store.state.base.goods), // 选择的商品
				tabIndex:0,
				status:'loading',
				isFlex:true,
				showLoading:true,
				tabList:[],
				lists:'',
				params:{
					pageNumber:1,
					pageSize:20,
					topCategoryId:12,
					categoryId:''
				}
			})

			onShow(()=>{
				if(state.orderInfo.orderType==1){
					store.commit('base/clear_goods') // 清空
				}	
			})
			const tabChange = (tabIndex)=>{
				state.lists = ''
				state.params.pageNumber = 1
				state.status = 'loading'
				state.tabIndex = tabIndex
				state.orderInfo.serviceType = state.tabIndex+1 // 服务类型
				store.commit('base/clear_goods') // 清空
				getList()
			}
			
			onMounted(()=>{
				state.orderInfo.serviceType = 1 // 服务类型
				getCtgList()
			})
			
			const getCtgList = ()=>{
				getCategoryList({
					parentId:12,
					state:1
				}).then(res =>{
					if(res.code!=0) return
					state.tabList = res.data
					getList()
				})
			}
			
			const getList = async ()=>{
				if(state.status == 'noMore') return;
				state.params.categoryId = state.tabList[state.tabIndex].id
				const res = await getServiceList(state.params)
				if(!state.lists){
					state.lists = res.data.list || []
				}else{
					state.lists = [...state.lists,...res.data.list]
				}
				if(state.lists.length>=res.data.total){
					state.status = 'noMore' // 数据加载完成了
				}else{
					state.status = 'loading'
				}
				state.params.pageNumber++
			}
			
			
			const goNext = ()=>{
				state.orderInfo.orderType = 2  // 订单类型：1为商城类订单，2位服务类订单
				uni.navigateTo({
					url:'/pages/mallBuy/mallBuy'
				})
			}
			
			return {
				...toRefs(state),
				tabChange,
				getList,
				goNext
			}
		}
	})
</script>

<style lang="scss" scoped>
	
	
</style>
